<template>
  <div>
    <!-- v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。 -->

    <p>输入框 {{name}}</p>
    <input type="text" v-model="name">

    <p>多行文本 {{desc}}</p>
    <textarea v-model="desc"></textarea>

    <p>单选 {{gender}}</p>
    <input type="radio" id="male" value="Male" v-model="gender">
    <label for="male">male</label>
    <input type="radio" id="female" value="Female" v-model="gender">
    <label for="female">female</label>

    <p>复选框 {{checked}}</p>
    <input type="checkbox" v-model="checked">like

    <p>多复选框 {{checkedNames}}</p>
    <input type="checkbox" id="aaron" value="Aaron" v-model="checkedNames">
    <label for="aaron">Aaron</label>
    <input type="checkbox" id="vera" value="Vera" v-model="checkedNames">
    <label for="vera">Vera</label>

    <p>下拉列表 {{selected}}</p>
    <select name="" id="" v-model="selected">
      <option disabled value="">请选择</option>
      <option value="苹果">苹果</option>
      <option value="梨子">梨子</option>
      <option value="西瓜">西瓜</option>
    </select>

    <p>下拉多选列表 {{selectedList}}</p>
    <select multiple name="" id="" v-model="selectedList">
      <option disabled value="">请选择</option>
      <option value="苹果">苹果</option>
      <option value="梨子">梨子</option>
      <option value="西瓜">西瓜</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      desc: '',
      gender: '',
      checked: false,
      checkedNames: [],
      selected: '',
      selectedList: []
    }
  }
}
</script>